<div class="container-fluid">
  <app-page-title title="knowledgebase" [breadcrumbItems]="breadCrumbItems"></app-page-title>
  <div class="knowledgebase-tabs">
    <div class="row">
      <div class="col-lg-2">
        <ul ngbNav #nav="ngbNav" [activeId]="catSelector" class="nav-pills flex-column">
          <li *ngFor="let item of categoryData.items" [ngbNavItem]="item.id">
            <a ngbNavLink (click)="setCategorySelectorId(item.id)">
              <i class="{{item.icon}} font-size-22 d-block check-nav-icon mt-4 mb-3"></i>
              <p joyrideStep="kbCat" title="Checklist type switcher" [stepContent]="kbCat" class="font-weight-bold mb-4">{{item.name}}</p>
            </a>
            <ng-template ngbNavContent>
              <div class="card">
                <div class="card-body">
                  <div class="row mb-3">
                    <div class="col-sm-9">
                      <h4 class="card-title mb-4">{{item.name}}</h4>
                    </div>
                    <div class="col-sm-3">
                      <div class="row">
                        <div class="col-7">
                          <div class="float-right">
                            <div class="search-box mb-2 d-inline-block">
                              <div class="position-relative">
                                <input class="form-control" [(ngModel)]="queryString" id="search" name="search" 
                                placeholder="Search KB item" onfocus="this.placeholder = ''"
                                onblur="this.placeholder = 'Search KB item'"/>
                                <i class="bx bx-search-alt search-icon"></i>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div *ngIf="priv.includes('manage')" class="float-right" 
                        joyrideStep="kbAdd" title="Add knowledge base example for checklist category" [stepContent]="kbAdd">
                          <button class="btn btn-primary float-right" [routerLink]="['/knowledgebase/create']">Add item</button>
                        </div>
                      </div>
                    </div>
                    <!-- end col-->
                  </div>
                  <div class="card shadow-none border mb-0">
                    <div class="card-body">

                      <!-- Load Spinner -->
                      <ngx-spinner [fullScreen]="true" type="ball-clip-rotate-multiple" size="medium">
                        <p class="loading">Loading, Please Wait...</p>
                      </ngx-spinner>
                      
                      <div class="row mt-3">
                        <div class="col-lg-12">
                          <!-- Content Body -->
                          <div class="row mb-4" *ngFor="let subitem of knowledgeData.items | stringfilter:queryString; let i = index">
                            <div class="col" joyrideStep="kbRow" title="Knowledge base examples" [stepContent]="kbRow" *ngIf="subitem.title != 'empty control'">
                              <div class="box media mb-2">
                                <div class="icon mr-3">
                                  <i class="bx bx-book-content font-size-20 text-success"></i>
                                </div>
                                <div class="media-body">
                                  <div class="row">
                                    <div class="col-sm-8">
                                      <h4 class="card-title text-primary">{{subitem.title}}</h4>
                                    </div>
                                    <div class="col-sm-4">
                                      <div class="text-right">
                                        <button data-toggle="collapse" (click)="isCollapsed[i] = !isCollapsed[i]"
                                        class="btn-sm btn-primary">Read More</button>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                              <div class="collapse" id="first" [ngbCollapse]="!isCollapsed[i]">
                                <div class="card shadow-none border card-body mb-0">
                                  <pre style="overflow-x: auto;white-space: pre-wrap;white-space: -moz-pre-wrap;white-space: -pre-wrap;white-space: -o-pre-wrap;word-wrap: break-word;">{{subitem.content}}</pre>
                                </div>
                                <div class="row mt-4">
                                  <div class="col-sm-6">
                                  </div> <!-- end col -->
                                  <div *ngIf="loggedIn()" class="col-sm-6">
                                    <div class="text-right">
                                      <a [routerLink]="['/knowledgebase/update', subitem.kb_id]"
                                        class="btn btn-sm btn-success m-1">
                                        <i class="mdi mdi-check mr-1"></i> Update </a>
                                      <button *ngIf="priv.includes('manage')" class="btn btn-sm btn-danger m-1"
                                       (click)="deleteModal(contentDelete)">
                                        <i class="bx bx-trash mr-1"></i> Delete </button>
                                    </div>
                                  </div> <!-- end col -->

                                </div>
                                <div class="dropdown-divider"></div>
                              </div>
                            </div>
                            <!-- Deletion modal-->
                            <ng-template #contentDelete let-modal>
                              <div class="modal-header">
                                <h5 class="modal-title mt-0">Delete Knowledgebase</h5>
                                <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Close click')">
                                  <span aria-hidden="true">&times;</span>
                                </button>
                              </div>
                              <div class="modal-body">
                                <form (ngSubmit)="onSubmit()">
                                  <div class="form-group">
                                    <label for="delete">Type <b class="text-danger">DELETE</b> to delete the Knowledgebase item
                                      item</label>
                                    <input autocomplete="off" [(ngModel)]="delete" type="text" class="form-control" id="delete"
                                      name="delete" placeholder="Type DELETE" onfocus="this.placeholder = ''"
                                      onblur="this.placeholder = 'Type DELETE'">
                                  </div>
                                  <button type="submit"
                                    (click)="deleteKnowledgebaseItem(subitem.kb_id); modal.dismiss('Cross click')"
                                    class="btn btn-danger">Delete</button>
                                </form>
                              </div>
                            </ng-template>
                            <!-- END Project Delete Modal -->
                          </div>
                          <!-- Content Body Ends-->
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </ng-template>
          </li>
        </ul>
      </div>
      <div class="col-lg-10">
        <div [ngbNavOutlet]="nav"></div>
      </div>
    </div>
  </div>
</div>


<ng-template #kbCat>
  <div class="card p-0">
    <div class="card-body text-center px-0 mr-2 ml-2">
      <h6>Here you can select the different checklist categories that will be used to display the specific knowledge base examples for this context.</h6>
    </div>
  </div>
</ng-template>

<ng-template #kbRow>
  <div class="card p-0">
    <div class="card-body text-center px-0 mr-2 ml-2">
      <h6>Here you can find all the knowledge base examples for the checklist type that is selected.</h6>
    </div>
  </div>
</ng-template>

<ng-template #kbAdd>
  <div class="card p-0">
    <div class="card-body text-center px-0 mr-2 ml-2">
      <h6>Here you can add a new knowledge base example for the checklist type that is selected.</h6>
    </div>
  </div>
</ng-template>